<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '倍阅书目',
	},
}
</route>

<template>
	<view class="page-class">
		<fly-navbar leftText="倍阅书目" fixed />
		<view class="mod">
			<view class="header">
				<view class="block">
					<view index="51" class="container">
						<text index="49" class="title">整本书阅读</text>
						<image index="47" :src="baseImg + '/beiyueshumu_xxjt.png'" class="icon-down" />
					</view>
					<view index="46" class="container-1">
						<text index="44" class="title-1">三年级</text>
						<image index="43" :src="baseImg + '/beiyueshumu_xxjt.png'" class="icon-down-1" />
					</view>
				</view>
				<image index="45" :src="baseImg + '/beiyueshumu_search.png'" class="picture" />
			</view>
			<view index="53" class="body">
				<view class="block-1">
					<image index="42" :src="baseImg + '/sjzwt.png'" class="item" />
					<view class="container-2">
						<text index="0" class="address">中国民间故事</text>
						<text index="2" class="name">陈红烟 编著</text>
						<text index="1" class="nick-name"
							>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井…</text
						>
						<view class="wrapper">
							<view class="group">
								<view index="24" class="mask" />
								<view index="22" class="overlayer" />
								<image index="21" :src="baseImg + '/moren.png'" class="large-icon" />
								<view class="address-wrapper" style="width: 220rpx; padding-left: 20rpx; margin: 0">
									<text index="48" class="address-1">785人读过</text>
								</view>
							</view>
							<view index="50" class="address-wrapper">
								<text index="48" class="address-1">查看资源</text>
							</view>
						</view>
					</view>
				</view>

				<view index="32" class="block-4">
					<image index="25" :src="baseImg + '/ic-shuba.png'" class="icon-text" />
					<text index="30" class="caption-1">看看别的分类</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import useChangeTabbar from '@/hooks/useChangeTabbar';
import { systemInfo } from '@/utils/getSystemInfo';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
});

const linkUrl = (url = '') => {
	if (!url) return;
	uni.navigateTo({ url });
};
//
useChangeTabbar(1);

const toRoster = () => {
	uni.navigateTo({
		url: '/pages/class/roster/index',
	});
};
</script>
<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.wx-swiper-dots .wx-swiper-dot {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background: #c6c6c8;
}

.swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 40rpx;
	height: 10rpx;
	border-radius: 10rpx;
	background: #909192;
}

.mod {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 750rpx;
	padding: 30rpx 8.3rpx 348.6rpx;
	overflow: auto;
	background-color: rgb(255 255 255 / 100%);
}

.header {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: space-between;
	width: 733.3rpx;
}

.block {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: space-between;
	width: 390.9rpx;
	height: 64.5rpx;
	margin-left: 25rpx;
}

.container {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: 213.8rpx;
	padding: 6.25rpx 8.3rpx 4.8rpx;
	overflow: auto;
	background-color: rgb(242 243 245 / 100%);
	border-radius: 31.2rpx;
}

.title {
	align-self: center;
	font-size: 26.3rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.icon-down {
	align-self: center;
	width: 15.2rpx;
	height: 11.1rpx;
	margin: 2rpx 0 0 15.2rpx;
}

.container-1 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: 158.3rpx;
	padding: 6.25rpx 8.3rpx 4.8rpx;
	margin-left: 30rpx;
	overflow: auto;
	background-color: rgb(242 243 245 / 100%);
	border-radius: 31.2rpx;
}

.title-1 {
	align-self: center;
	margin-left: 0.6rpx;
	font-size: 26.3rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.icon-down-1 {
	align-self: center;
	width: 15.2rpx;
	height: 11.1rpx;
	margin: 2rpx 0 0 11.8rpx;
}

.picture {
	align-self: center;
	width: 62.5rpx;
	height: 62.5rpx;
	margin: 0.6rpx 33.3rpx 0 0;
}

.body {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 682.6rpx;
	padding: 34.7rpx 8.3rpx 46.5rpx;
	margin: 31.25rpx 0.6rpx 0 0;
	overflow: auto;
	background-color: rgb(255 255 255 / 100%);
	border-radius: 31.25rpx;
	box-shadow: 0 4.8rpx 45.1rpx 0 rgb(0 0 0 / 10%);
}

.block-1 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 665.9rpx;
	height: 265.9rpx;
}

.item {
	align-self: flex-start;
	width: 211.8rpx;
	height: 250rpx;
	margin-left: 25rpx;
}

.container-2 {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 429.1rpx;
	height: 265.9rpx;
	padding: 8.3rpx 0;
}

.address {
	align-self: flex-start;
	max-width: 387.5rpx;
	margin-left: 20.8rpx;
	overflow: hidden;
	font-size: 33.3rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(47 47 47 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.name {
	align-self: flex-start;
	max-width: 384.7rpx;
	margin: 6.5rpx 0 0 22.2rpx;
	overflow: hidden;
	font-size: 22.2rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 22.2rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nick-name {
	align-self: center;
	max-width: 379.1rpx;
	margin: 3.125rpx 2.7rpx 0 0;
	overflow: hidden;
	font-size: 22.2rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(145 145 145 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wrapper {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 387.5rpx;
	margin-top: 18.75rpx;
}

.group {
	position: relative;
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 160.4rpx;
	height: 49.3rpx;
	margin-left: 55.5rpx;
}

.view {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 160.4rpx;
	padding: 11.1rpx 8.3rpx 9.7rpx;
	overflow: auto;
	background-color: rgb(43 165 223 / 100%);
	border: 2.7rpx solid rgb(240 240 240 / 100%);
	border-radius: 0 25px 25px 0;
}

.logo {
	align-self: center;
	width: 92.3rpx;
	height: 18.75rpx;
	margin-right: 1.3rpx;
}

.mask {
	position: absolute;
	top: 0;
	left: -56.25rpx;
	box-sizing: border-box;
	width: 60.4rpx;
	height: 49.3rpx;
	overflow: auto;
	background-color: rgb(255 255 255 / 100%);
	border: 2.7rpx solid rgb(240 240 240 / 100%);
	border-radius: 24.6rpx;
}

.overlayer {
	position: absolute;
	top: 0;
	left: -36rpx;
	box-sizing: border-box;
	width: 49.3rpx;
	height: 49.3rpx;
	overflow: auto;
	background-color: rgb(255 255 255 / 100%);
	border: 2.7rpx solid rgb(240 240 240 / 100%);
	border-radius: 24.6rpx;
}

.large-icon {
	position: absolute;
	top: 0;
	left: -22.9rpx;
	width: 49.3rpx;
	height: 49.3rpx;
}

.address-wrapper {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: 140.9rpx;
	padding: 13.5rpx 8.3rpx 12.1rpx;
	margin-left: 27.7rpx;
	overflow: auto;
	background-color: rgb(43 165 223 / 100%);
	border-radius: 23.6rpx;
}

.address-1 {
	align-self: flex-start;
	overflow: hidden;
	font-size: 23.6rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 23.6rpx;
	color: rgb(255 255 255 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.block-2 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 665.9rpx;
	height: 281.9rpx;
}

.product {
	align-self: center;
	width: 211.8rpx;
	height: 250rpx;
	margin-left: 25rpx;
}

.container-3 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 429.1rpx;
	height: 281.9rpx;
	padding: 8.3rpx 0;
}

.caption {
	align-self: flex-start;
	max-width: 388.8rpx;
	margin: 15.9rpx 0 0 20.1rpx;
	overflow: hidden;
	font-size: 33.3rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user {
	align-self: flex-start;
	max-width: 384.7rpx;
	margin: 6.5rpx 0 0 22.2rpx;
	overflow: hidden;
	font-size: 22.2rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 22.2rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.summary {
	align-self: center;
	max-width: 423.6rpx;
	margin: 3.125rpx 2.7rpx 0 0;
	overflow: hidden;
	font-size: 22.2rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(144 144 144 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wrapper-1 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 388.8rpx;
	margin-top: 18.75rpx;
}

.group-1 {
	position: relative;
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 160.4rpx;
	height: 49.3rpx;
	padding: 4.8rpx 0;
	margin-left: 56.25rpx;
}

.view-1 {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 160.4rpx;
	padding: 11.1rpx 8.3rpx 9.7rpx;
	overflow: auto;
	background-color: rgb(43 165 223 / 100%);
	border: 2.7rpx solid rgb(240 240 240 / 100%);
	border-radius: 0 25px 25px 0;
}

.logo-1 {
	align-self: center;
	width: 92.3rpx;
	height: 18.75rpx;
	margin-right: 1.3rpx;
}

.layer {
	position: absolute;
	top: 0;
	left: -56.25rpx;
	box-sizing: border-box;
	width: 60.4rpx;
	height: 49.3rpx;
	overflow: auto;
	background-color: rgb(255 255 255 / 100%);
	border: 2.7rpx solid rgb(240 240 240 / 100%);
	border-radius: 24.6rpx;
}

.mask-1 {
	position: absolute;
	top: 0;
	left: -34rpx;
	box-sizing: border-box;
	width: 49.3rpx;
	height: 49.3rpx;
	overflow: auto;
	background-color: rgb(255 255 255 / 100%);
	border: 2.7rpx solid rgb(240 240 240 / 100%);
	border-radius: 24.6rpx;
}

.large-icon-1 {
	position: absolute;
	top: 0;
	left: -22.9rpx;
	width: 49.3rpx;
	height: 49.3rpx;
}

.location-wrapper {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: 140.9rpx;
	padding: 0 8.3rpx;
	margin-left: 27.7rpx;
	overflow: auto;
	background-color: rgb(43 165 223 / 100%);
	border-radius: 23.6rpx;
}

.location {
	align-self: flex-start;
	max-width: 117.3rpx;
	margin-left: 3.4rpx;
	overflow: hidden;
	font-size: 23.6rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(255 255 255 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.block-3 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 665.9rpx;
	height: 317.3rpx;
}

.item-1 {
	align-self: flex-start;
	width: 211.8rpx;
	height: 250rpx;
	margin: 15.9rpx 0 0 25rpx;
}

.container-4 {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 429.1rpx;
	height: 317.3rpx;
	padding: 7.6rpx 0 8.3rpx;
}

.title-2 {
	align-self: flex-start;
	max-width: 390.2rpx;
	margin: 15.9rpx 0 0 19.4rpx;
	overflow: hidden;
	font-size: 33.3rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-name {
	align-self: flex-start;
	max-width: 384.7rpx;
	margin: 6.5rpx 0 0 22.2rpx;
	overflow: hidden;
	font-size: 22.2rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 22.2rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.summary-1 {
	align-self: center;
	max-width: 381.25rpx;
	margin: 3.125rpx 2.1rpx 0 0;
	overflow: hidden;
	font-size: 22.2rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(144 144 144 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wrapper-2 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 390.2rpx;
	margin-top: 18.7rpx;
}

.group-2 {
	position: relative;
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 160.4rpx;
	height: 49.3rpx;
	padding: 4.8rpx 0;
	margin-left: 56.9rpx;
}

.view-2 {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 160.4rpx;
	padding: 11.1rpx 8.3rpx 9.7rpx;
	overflow: auto;
	background-color: rgb(43 165 223 / 100%);
	border: 2.7rpx solid rgb(240 240 240 / 100%);
	border-radius: 0 25px 25px 0;
}

.logo-2 {
	align-self: center;
	width: 92.3rpx;
	height: 18.7rpx;
	margin-right: 1.3rpx;
}

.overlayer-1 {
	position: absolute;
	top: 0;
	left: -56.25rpx;
	box-sizing: border-box;
	width: 60.4rpx;
	height: 49.3rpx;
	overflow: auto;
	background-color: rgb(255 255 255 / 100%);
	border: 2.7rpx solid rgb(240 240 240 / 100%);
	border-radius: 24.6rpx;
}

.layer-1 {
	position: absolute;
	top: 0;
	left: -34rpx;
	box-sizing: border-box;
	width: 49.3rpx;
	height: 49.3rpx;
	overflow: auto;
	background-color: rgb(255 255 255 / 100%);
	border: 2.7rpx solid rgb(240 240 240 / 100%);
	border-radius: 24.6rpx;
}

.large-icon-2 {
	position: absolute;
	top: 0;
	left: -22.9rpx;
	width: 49.3rpx;
	height: 49.3rpx;
}

.location-wrapper-1 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: 140.9rpx;
	padding: 0 8.3rpx;
	margin-left: 27.7rpx;
	overflow: auto;
	background-color: rgb(43 165 223 / 100%);
	border-radius: 23.6rpx;
}

.location-1 {
	align-self: flex-start;
	max-width: 117.3rpx;
	margin-left: 3.43rpx;
	overflow: hidden;
	font-size: 23.6rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.1rpx;
	color: rgb(255 255 255 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.block-4 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	height: 60rpx;
	padding: 0 50rpx;
	margin-top: 20rpx;
	overflow: auto;
	background-color: #f5f7f9;
	border-radius: 34.7rpx;
}

.icon-text {
	align-self: center;
	width: 37.5rpx;
	height: 35.4rpx;
}

.caption-1 {
	align-self: center;
	margin-left: 14.6rpx;
	font-size: 29rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 54.2rpx;
	color: rgb(162 175 205 / 100%);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
</style>
